<template>
	<xn-form-container
		:title="formData.taskId ? '编辑任务表' : '增加任务表'"
		:width="700"
		:visible="visible"
		:destroy-on-close="true"
		@close="onClose"
	>
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
        			<a-divider>任务信息</a-divider>
        			<a-row :gutter="16">
        				<a-col :span="24">
        					<a-form-item label="任务名称：" name="taskName">
        						<a-input v-model:value="formData.taskName" placeholder="请输入任务名称" allow-clear />
        					</a-form-item>
        				</a-col>
        				<a-col :span="24">
        					<a-form-item label="盯防奖励：" name="rewards">
        						<a-input-number style="width: 100%" v-model:value="formData.rewards" placeholder="请输入盯防奖励" allow-clear />
        					</a-form-item>
        				</a-col>
        				<a-col :span="24">
        					<a-form-item label="任务要求：" name="requirements">
        						<a-textarea v-model:value="formData.requirements" placeholder="请输入任务要求" :rows="4"
        									allow-clear :maxlength="200"/>
        					</a-form-item>
        				</a-col>
        			</a-row>
        			<a-divider>审核记录</a-divider>
        			<s-table
        				ref="table"
        				:columns="columns"
        				:data="loadData"
        				bordered
        			>
        				<template #bodyCell="{ column, record }">
        					<template v-if="column.dataIndex === 'auditStatus'">
        						{{ $TOOL.dictTypeData('auditResult', record.auditStatus) }}
        					</template>
        				</template>
        			</s-table>
        		</a-form>
        		<template #footer>
        			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
        			<a-button type="primary" @click="onSubmit" :loading="submitLoading">提交审核</a-button>
        		</template>
        	</xn-form-container>
        </template>

        <script setup name="taskForm">
        	import { cloneDeep } from 'lodash-es'
        	import { required } from '@/utils/formRules'
        	import taskApi from '@/api/biz/task/taskApi'
        	import bizUserApi from "@/api/biz/bizUserApi";
        	// 抽屉状态
        	const visible = ref(false)
        	const emit = defineEmits({ successful: null })
        	const formRef = ref()
        	let searchFormState = reactive({})
        	// 表单数据
        	const formData = ref({})
        	const submitLoading = ref(false)
        	const chargeUserOptions = ref([])
        	const table = ref()
        	const columns = [
        		{
        			title: '流程名称',
        			dataIndex: 'taskName',
        			width: 160,
        			align:'center'
        		},
        		{
        			title: '审核时间',
        			dataIndex: 'createTime',
        			width: 160,
        			align:'center'
        		},
        		{
        			title: '操作人名称',
        			dataIndex: 'createUserName',
        			width: 160,
        			align:'center'
        		},
        		{
        			title: '审核结果',
        			dataIndex: 'auditStatus',
        			align:'center'
        		},
        		{
        			title: '备注',
        			dataIndex: 'remark',
        			align:'center'
        		},
        	]
        	// 打开抽屉
        	const onOpen = (record) => {
        		visible.value = true
        		if (record) {
        			let recordData = cloneDeep(record)
        			formData.value = Object.assign({}, recordData)
        			searchFormState.taskId = record.taskId
        		}
        		bizUserApi.listRoleUser( {'roleCode':'role_charge_leader'}).then((res) => {
        			chargeUserOptions.value = res
        		})
        	}
        	const loadData = (parameter) => {
        		const searchFormParam = JSON.parse(JSON.stringify(searchFormState))
        		return taskApi.pageAuditRecord(Object.assign(parameter, searchFormParam)).then((data) => {
        			return data
        		})
        	}
        	// 关闭抽屉
        	const onClose = () => {
        		formRef.value.resetFields()
        		formData.value = {}
        		visible.value = false
        	}
        	// 默认要校验的
        	const formRules = {
        		rewards: [required('请输入盯防奖励')],
        		taskName: [required('请输入任务名称')],
        		requirements: [required('请输入任务要求')],
        		auditResult: [required('请选择审核结果')],
        		auditRemark: [required('请输入审核备注')],
        	}
	// 验证并提交数据
	const onSubmit = () => {
		formRef.value.validate().then(() => {
			submitLoading.value = true
			const formDataParam = cloneDeep(formData.value)
			taskApi
				.taskEdit(formDataParam)
				.then(() => {
					onClose()
					emit('successful')
				})
				.finally(() => {
					submitLoading.value = false
				})
		})
	}
	// 抛出函数
	defineExpose({
		onOpen
	})
</script>
